<template>
	<view class="content">
		<view class="pie-content">
			<view id="dynamicChart" style="width: 500px;height: 400px;"></view>
		</view>
		<view id="barChart" style="width: 500px;height: 400px;"></view>
		
		<button @click="tiaozhuan">展示饼图</button>
		<button @click="union">展示联动</button>
		<button @click="map">展示地图</button>
		
	</view>
</template>

<script>
	//npm i echarts
	import * as echarts from "echarts"
	//npm i vue-count-to
	import countTo from "vue-count-to"
	export default {
		data() {
			return {
				num: 500,
				dataDynamic: [],
				chartDynamic:null,
				option: {
					title: {
						text: '示例'
					},
					tooltip: {
						show: true,
						trigger: 'item',//触发类型，数据项图形触发
						formatter: '{b}的销量是{c}',//折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
					},
					toolbox: {
						feature: {
							saveAsImage: {}, //导出图片
							dataView: {}, //数据视图
							restore: {}, //重置
							magicType: {
								type: ['bar', 'line','stack']
							}, //类型切换 stack堆叠图
						}
					},
					legend: {
						data: ['销量', '销量2']
					},
					xAxis: {
						data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
					}, {
						name: '销量2',
						type: 'bar',
						data: [10, 5, 30, 10, 10, 20]
					}],
					animationDuration: 2000,

				},				
				optionDynamic: {
					xAxis: {
						max: 'dataMax'
					},
					yAxis: {
						type: 'category',
						data: ['A', 'B', 'C', 'D', 'E'],
						inverse: true,
						animationDuration: 300,
						animationDurationUpdate: 300,
						max: 2 // 从0开始
					},
					series: [{
						realtimeSort: true,
						name: 'X',
						type: 'bar',
						data: [103,102,100,10,163],
						label: {
							show: true,
							position: 'right',
							valueAnimation: true
						}
					}],
					legend: {
						show: true
					},
					animationDuration: 0,
					animationDurationUpdate: 3000,
					animationEasing: 'linear',
					animationEasingUpdate: 'linear'
				},

			}
		},
		components: {
			countTo
		},
		onLoad() {			
			for (let i = 0; i < 5; ++i) {
				this.dataDynamic.push(Math.round(Math.random() * 200));
			}
		},
		mounted() {
			this.initChart()
			setTimeout(()=> {
			  this.run();
			}, 0);
			setInterval(()=> {
			  this.run();
			}, 3000);
		},
		methods: {
			initChart() {
				var chartColumn = echarts.init(document.getElementById('barChart'), 'dark')
				this.chartDynamic = echarts.init(document.getElementById('dynamicChart'), 'dark')

				chartColumn.showLoading()
				chartColumn.setOption(this.option)
				chartColumn.hideLoading()				
				this.chartDynamic.setOption(this.optionDynamic)
			},
			run() {
				for (var i = 0; i < this.dataDynamic.length; ++i) {
					if (Math.random() > 0.9) {
						this.dataDynamic[i] += Math.round(Math.random() * 2000);
					} else {
						this.dataDynamic[i] += Math.round(Math.random() * 200);
						
					}
				}
				this.chartDynamic.setOption({
					series: [{
						type: 'bar',
						data:this.dataDynamic
					}]
				});
			},
			tiaozhuan(){
				uni.navigateTo({
					url:'./bar-heng'
				})
			},
			union(){
				uni.navigateTo({
					url:'./union'
				})
			},
			map(){
				uni.navigateTo({
					url:'./map'
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		/* flex-wrap: wrap; */
	}

	.pie-content {
		background: black;
		color: white;
	}

	.dynamic-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.show-item {
		font-size: 30px;
	}

	.show-text {
		font-size: 18px;
	}
</style>
